<template>
  <div class="wrapper">
    <header>
      <p>商家中心</p>
    </header>
    <div class="other">
      <div class="head">
        <div class="head-img">
          <img :src="businesser.businessImg" alt="头像">
        </div>
        <div class="head-dsb">
          <p>{{businesser.businessName}}</p>
          <br/>
          <p>地址 {{businesser.businessAddress}}</p>
        </div>
      </div>


      <section class="mt-1">
              <div class="ps-lt">
                <div class="lt-dsb" @click="editInfo">
                  <p>修改信息</p>
                  <i class="arr-right"></i>
                </div>
              </div>
        <div class="ps-lt">
          <div class="lt-dsb" @click="Tofood">
            <p>修改食品</p>
            <i class="arr-right"></i>
          </div>
        </div>
        <div class="ps-lt">
          <div class="lt-dsb" @click="change">
            <p>修改密码</p>
            <i class="arr-right"></i>
          </div>
        </div>
        <div class="ps-lt">
          <div class="lt-dsb cl-bb" @click="logout">
            <p>退出登录</p>
            <i class="arr-right"></i>
          </div>
        </div>
      </section>
      <div class="jg"></div>
    </div>
    <Footer></Footer>
   <div v-if="showEditModal" class="edit-modal">
     <div class="modal-content">
       <span class="close" @click="showEditModal = false">&times;</span>
       <p>修改商家信息</p>
       <input type="text" placeholder="商家名称" v-model="editData.businessName" class="input-common" />
       <input type="text" placeholder="地址" v-model="editData.businessAddress" class="input-common" />
       <input type="text" placeholder="介绍" v-model="editData.businessDescription" class="input-common" />
       <input type="number" placeholder="起送价" v-model="editData.minimumOrder" class="input-common" />
       <input type="number" placeholder="配送费" v-model="editData.deliveryFee" class="input-common" />
       <input type="file" @change="handleImageChange" class="input-file" />
       <button class="file-upload-btn">选择头像</button>
       <img :src="editData.businessImg" alt="头像预览" v-if="editData.businessImg" class="edit-modal-img" />
       <button @click="updateInfo" class="file-upload-btn">确认修改</button>
     </div>
   </div>
		<div v-if="showPasswordModal" class="password-modal">
		  <div class="modal-content">
		    <span class="close" @click="showPasswordModal = false">&times;</span>
		    <p>修改密码</p>
		    <input type="password" placeholder="原密码" v-model="originalPassword" class="input-common" />
		    <input type="password" placeholder="新密码" v-model="newPassword" class="input-common" />
		    <input type="password" placeholder="确认新密码" v-model="confirmedPassword" class="input-common" />
		    <button @click="updatePassword" class="file-upload-btn">确认修改</button>
		  </div>
		</div>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';
import request from '../request.js';
export default {
  name: 'mybusiness',
  data() {
    return {
      businesser: {
		businessPassId: '',
        businessImg: '',
        businessName: '',
        businessAddress: '',
		businessDescription: '',
		minimumOrder: 0,
		deliveryFee: 0
      },
     editData: {  // 用于绑定模态框中的输入
             businessName: '',
             businessAddress: '',
             businessDescription: '',
             minimumOrder: 0,
             deliveryFee: 0,
             newPassword: '',
			 buisnessImg: ''
           },
      showEditModal: false,// 控制修改密码模态框的显示
	  showPasswordModal: false
    };
  },
  created() {
    this.businesser = this.$getSessionStorage('businesser');
  },
  methods: {
	Tofood(businessId)
	    {
	    	this.$router.push({path: '/food',query : {businessId : this.businessId}});
	    },
		change() {
		  this.showPasswordModal = true;  // 显示修改密码模态框
		},
    editInfo() {
          this.showEditModal = true;  // 显示修改信息模态框
        },
    logout() {
      this.$removeSessionStorage('businesser');  // 清除用户信息
      this.$router.push('/login');  // 重定向到登录页面
    },
	 handleImageChange(event) {
	    const file = event.target.files[0];
	    const reader = new FileReader();
	    reader.onload = (e) => {
	      this.editData.businessImg = e.target.result;
	    };
	    reader.readAsDataURL(file);
	  },
    updateInfo() {
          // 调用接口更新商家信息
          request.put(`/businesses/${this.businesser.businessPassId}`, this.$qs.stringify({
			businessName: this.editData.businessName,
			businessAddress: this.editData.businessAddress,
			businessExplain: this.editData.businessDescription,
			starPrice: this.editData.minimumOrder,
			deliveryPrice: this.editData.deliveryFee,
			businessImg: this.editData.businessImg,
		  })).then(response => {
            // 处理响应
            console.log('商家信息更新成功', response);
              // 更新存储的信息
            this.showEditModal = false;  // 关闭模态框
          }).catch(error => {
            // 处理错误
            console.error('更新商家信息失败', error);
          });
        }
      },
	  updatePassword() {
	        if (this.newPassword !== this.confirmedPassword) {
	          alert('两次输入的新密码不匹配，请重新输入！');
	          return;
	        }
	        if (this.originalPassword !== this.businesser.password) {
	          alert('原密码错误，无法修改！');
	          this.showPasswordModal = false;
	          return;
	        }
	        const data = {
	          originalPassword: this.originalPassword,
	          newPassword: this.newPassword
	        };
	        request.put(`/businesses/${this.businesser.businessPassId}`, this.$qs.stringify(data)).then(response => {
	          console.log('密码更新成功', response);
	          this.showPasswordModal = false;
	        }).catch(error => {
	          console.error('密码更新失败', error);
	          alert('密码更新失败，请重试！');
	        });
	      },
  components: {
    Footer
  }
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #efeff4;
  position: relative;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background: #0097ff;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .other {
  width: 100%;
  margin-top: 10vw;
  position: relative;
}

.wrapper .other .head {
  position: relative;
  width: 100%;
  height: 20vw;
  padding-top: 12vw;
  background: #ffffff;
  background-size: 100% 100%;
}

.wrapper .other .head-img {
  position: absolute;
  top: 0.35rem;
  left: 10vw;
  width: 1.43rem;
  height: 1.43rem;
  padding: 0.04rem;
  border-radius: 1rem;
  background-color: #fff;
}

.wrapper .other .head-img img {
  margin-top: 4.8vw;
  width: 20vw;
  height: 20vw;
}

.wrapper .other .head-dsb {
  position: absolute;
  top: 8vw;
  left: 35vw;
}

.wrapper .other .head-dsb p {
  font-size: 4.5vw;
  color: #666;
}

.wrapper .other .head-dsb .dsb-id {
  margin-top: 0.08rem;
}

.wrapper .other .nav {
  margin-top: 2vw;
  width: 100%;
  height: 25vw;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
}

.wrapper .other .nav li {
  width: 16vw;
  height: 20vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  border-bottom: 1px solid #e5e5e5;
}

.wrapper .other .nav li img {
  width: 10vw;
  height: 10vw;
}

.wrapper .other .nav li p {
  font-size: 4vw;
  color: #666;
}

.wrapper .other .mt-1 {
  padding-top: 3vw;
  width: 100%;
  height: 16vw;
  background-color: #fff;
  margin-bottom: 5vw;
}

.wrapper .other .mt-1 .ps-lt {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}

.wrapper .other .mt-1 .ps-lt .lt-dsb {
  position: relative;
  width: 90%;
  height: 6vw;
  line-height: 6vw;
  margin-left: 2vw;
  border-bottom: 1px solid #e5e5e5;
}

.wrapper .other .mt-1 .ps-lt .lt-dsb p {
  margin-left: 2vw;
  font-size: 4vw;
  color: #838383;
}

.wrapper .other .mt-1 .ps-lt .lt-dsb .arr-right {
  display: block;
  position: absolute;
  top: 0.21rem;
  right: 0.25rem;
  width: 0.14rem;
  height: 0.24rem;
  background: url(../assets/arr-right.png) no-repeat;
  background-size: 0.14rem 0.24rem;
}

.wrapper .other .jg {
  padding-bottom: 0.8rem;
}

.wrapper .other.head.head-img {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 100px;
  overflow: hidden;
}

.wrapper .other.head.head-img img {
  width: 100%;
  height: 100%;
}

.password-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
}

.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}
/* 通用输入框样式 */
	.input-common {
	  width: 100%;
	  padding: 10px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  font-size: 16px;
	  box-sizing: border-box;
	  margin-bottom: 10px;
	}
	
	/* 聚焦状态样式 */
	.input-common:focus {
	  border-color: #0097ff;
	  box-shadow: 0 0 8px rgba(0, 151, 255, 0.5);
	  outline: none;
	}
	
	/* 文件输入框样式 */
	.input-file {
	  display: none;
	}
	
	/* 自定义文件选择按钮 */
	.file-upload-btn {
	  display: inline-block;
	  padding: 10px 15px;
	  background-color: #0097ff;
	  color: white;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	  font-size: 16px;
	}
	
	.file-upload-btn:hover {
	  background-color: #007ac1;
	}

/* 模态框背景 - 半透明遮罩 */
	.edit-modal {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	/* 模态框内容 - 有色背景 */
	.modal-content {
	  background-color: #fff; /* 白色背景 */
	  padding: 20px;
	  border-radius: 5px;
	  width: 80%;
	  max-width: 400px; /* 限制最大宽度 */
	  z-index: 1050; /* 确保内容在遮罩之上 */
	  position: relative; /* 相对定位 */
	}

/* 操作按钮容器 - 使用Flexbox居中按钮 */
.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 确认修改按钮样式 */
.confirm-btn {
  padding: 10px 15px;
  background-color: #0097ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.confirm-btn:hover {
  background-color: #007ac1;
}


.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}
</style>